<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>img-previewer</title>
		<link rel="stylesheet" href="../dist/index.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				/* outline: 1px solid #74ebd5; */
			}
			body {
				height: 100%;
				width: 100%;
				overflow: auto;
			}
			.banner {
				height: 300px;
				width: 100%;
				background: #74ebd5; /* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #155b95, #16955c); /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(
					to right,
					#155b95,
					#16955c
				); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
				color: #fff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.banner p {
				color: #f1f1f1;
				margin-top: 15px;
			}
			.banner a {
				margin-top: 15px;
				display: inline-block;
				color: #fff;
				border: 1px solid #f1f1f1;
				padding: 7.5px 15px;
				border-radius: 4px;
				text-decoration: none;
				cursor: pointer;
			}
			.banner a:hover {
				border: 1px solid #c3c3c3;
				color: #c3c3c3;
			}
			.container {
				width: 1000px;
				margin: 0 auto;
				color: #606c71;
			}
			.container h2 {
				font-weight: 500;
				color: #159957;
				margin-top: 25px;
			}
			.container p {
				margin: 7.5px 0;
				line-height: 1.5;
			}

			.container ol {
				margin-top: 15px;
			}
			.container ol,
			.container li {
				line-height: 1.5;
				list-style-position: inside;
			}
			.container pre {
				padding: 15px 10px;
				text-align: left;
				background: #f1f1f1;
				border-radius: 4px;
				margin-top: 15px;
			}
			#app {
				width: 100%;
				-webkit-column-count: 4;
				-moz-column-count: 4;
				column-count: 4;
				-webkit-column-gap: 15px;
				-moz-column-gap: 15px;
				column-gap: 15px;
			}
			#app img {
				width: 100%;
				margin: 6px 0;
			}
			#add,
			#play {
				margin-bottom: 10px;
				margin-top: 15px;
				display: inline-block;
				border: 1px solid #f1f1f1;
				padding: 7.5px 15px;
				border-radius: 4px;
				text-decoration: none;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<div>
				<h1>img-previewer</h1>
				<p>Lightweight and powerful javascript image preview plugin</p>
				<a href="https://github.com/yue1123/img-previewer">gitHub API documention</a>
			</div>
		</div>
		<div class="container">
			<h2>img-previewer</h2>
			<p>
				Lightweight and powerful javascript image preview plug-in, silky animation allows you to elegantly preview the
				images in your website. Out of the box, you don't need extra configuration (by default) or change the page html
				code structure, you can easily enable the plugin in any type of website and upgrade your user experience
			</p>
			<p>These functions are provided:</p>
			<ol>
				<li>Silky, interruptible transition animation</li>
				<li>Use mouse wheel to zoom picture</li>
				<li>Icon drag picture</li>
				<li>Previous & Next</li>
				<li>Shortcut key support</li>
				<li>Support for mobile gestures (zoom in with two fingers)</li>
				<li>Multi-language internationalization support</li>
				<li>Picture loading monitor</li>
			</ol>
			<h2>Setup</h2>
			<pre><code>npm i img-previewer</code></pre>
			<h2>simple demo</h2>
			<p>Can dynamically update the picture list</p>
			<button id="add">add one</button>
			<button id="play">play slideshow</button>
			<div id="app">
				<img src="./img/pexels-photo-1172064.jpeg" alt="" />

				<img src="./img/pexels-photo-210307.jpeg" alt="" />
				<img src="./img/pexels-photo-347145.jpeg" alt="" />
				<img src="./img/pexels-photo-358238.jpeg" alt="" />
				<img src="./img/pexels-photo-53893.jpeg" alt="" />
				<img src="./img/pexels-photo-1658967.jpeg" alt="" />
				<img src="./img/pexels-photo-620337.jpeg" alt="" />
				<img src="./img/pexels-photo-994605.jpeg" alt="" />
				<img src="./img/pexels-photo-1006121.jpeg" alt="" />
			</div>
		</div>

		<script src="../dist/img-previewer.min.js"></script>
		<script>
			const a = new ImgPreviewer('#app', {
				scrollbar: true,
				ratio: 0.7,
				imageZoom: {
					step: 1
				},
				style: {
					modalOpacity: 0.8
				},
				bubblingLevel: 1,
				i18n: {
					RESET: 'reset',
					ROTATE_LEFT: 'rotate left',
					ROTATE_RIGHT: 'rotate right',
					CLOSE: 'close',
					NEXT: 'next',
					PREV: 'prev'
				},
				onHide() {
					clearInterval(timer)
				}
			})
			let timer = null
			function play() {
				timer && clearInterval(timer)
				let index = 0
				a.show(index)
				timer = setInterval(() => {
					if (index < a.getTotalIndex()) {
						index++
					} else {
						index = 0
					}
					a.show(index)
				}, 2000)
			}
			function add() {
				let img = document.createElement('img')
				img.src = `https://picsum.photos/500/500?random}`
				img.onload = function () {
					document.getElementById('app').appendChild(img)
					a.update()
				}
			}
			document.getElementById('add').onclick = add
			document.getElementById('play').onclick = play
		</script>
	</body>
</html>
